<template>
    <page-header-wrapper :title="false">
      <a-card
        title="问题客户列表"
      >
        <s-table
          ref="table"
          :row-key="(record) => record.customer_id"
          :columns="questionColumns"
          :data="questionData"
        >
          <div
            slot="filterSelect"
            slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
            style="padding: 8px"
          >
            <a-select
              show-search
              style="width: 188px; margin-bottom: 8px; display: block;"
              :placeholder="`选择${column.title}`"
              :value="selectedKeys[0]"
              :filter-option="filterOption"
              @change="(value) => setSelectedKeys(value ? [value] : [])"
              @pressEnter="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
            >
              <a-select-option v-for="(item,index) in adviserOpts" :key="index" :value="index">{{item}}</a-select-option>
            </a-select>
            <a-button
              type="primary"
              icon="search"
              size="small"
              style="width: 90px; margin-right: 8px"
              @click="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
            >
              搜索
            </a-button>
            <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters, column.dataIndex)">
              重置
            </a-button>
          </div>
          <template slot="action" slot-scope="text,record">
            <a-button size="small" type="danger" @click="delCustomer(record.customer_id)">删除</a-button>
          </template>
        </s-table>
      </a-card>
    </page-header-wrapper>
</template>

<script>
  import { STable } from '@/components'
  import col from '@/columns/customer'
  import { delProblem, getProblemList } from '@/api/customer'

  export default {
    components: {
      STable
    },
    name: 'QstList',
    data () {
      return {
        visible: false,
        questionColumns: col.question,
        questionData: parameters => {
          return getProblemList(Object.assign(parameters, this.queryParam)).then(res => {
            this.adviserOpts = res.result.adviser_array
            return res.result
          })
        },
        queryParam: {},
        adviserOpts: {}
      }
    },
    methods: {
      delCustomer (id) {
        const app = this
        app.$confirm({
          title: '是否永久删除此客户',
          onOk: () => {
            delProblem(id).then(res => {
              if (res.status === 0) {
                app.$refs.table.refresh()
              } else {
                app.$warning({
                  title: res.msg
                })
              }
            })
          }
        })
      },
      handleSelect (selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
        this.queryParam['filter[' + dataIndex + ']'] = selectedKeys[0]
      },
      handleReset (clearFilters, dataIndex) {
        clearFilters()
        delete this.queryParam['filter[' + dataIndex + ']']
      },
      filterOption (input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        )
      }
    }
  }
</script>

<style scoped>

</style>
